<template>
    <div>
        <div class="center-box-warp">
            <el-row :gutter="10">
                <el-col :span="12">
                    <el-row :gutter="10">
                        <el-col :span="16">
                            <div class="center-left-box-cavan">
                                <!-- 顶部圆 -->
                                <div
                                    class="left-box-cavan-word"
                                    style="margin-top: 10px"
                                >
                                    光伏
                                    <span class="top-line"></span>
                                    <span class="top-line"></span>
                                    <span class="top-line"></span>
                                </div>
                                <el-popover
                                    placement="right-start"
                                    width="200"
                                    trigger="hover"
                                >
                                    <div
                                        slot="reference"
                                        class="left-box-cavan-circle"
                                        style="
                                            border: 1px #fff6d9 solid;
                                            margin: 0 auto;
                                        "
                                    >
                                        <div class="left-box-cavan-top">
                                            <el-image
                                                :src="
                                                    require('@/assets/solarPower/guangfu.png')
                                                "
                                                fit="fill"
                                            />
                                            <div style="font-size: 12px">
                                                <div>
                                                    {{ pageData.outputPower }}
                                                </div>
                                                <div>kw</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div
                                        style="
                                            font-size: 12px;
                                            line-height: 20px;
                                        "
                                    >
                                        <!-- <el-row>
                      <el-col :span="12">优化器</el-col>
                      <el-col :span="12">48个</el-col>
                    </el-row> -->
                                        <el-row>
                                            <el-col :span="12">设备总数</el-col>
                                            <el-col :span="12"
                                                >{{
                                                    pageData.devTotal
                                                }}台</el-col
                                            >
                                        </el-row>
                                        <el-row>
                                            <el-col :span="12">输出功率</el-col>
                                            <el-col :span="12"
                                                >{{
                                                    pageData.outputPower
                                                }}(kw)</el-col
                                            >
                                        </el-row>
                                        <el-row>
                                            <el-col :span="12">总发电量</el-col>
                                            <el-col :span="12"
                                                >{{
                                                    pageData.total_power
                                                }}(kWh)</el-col
                                            >
                                        </el-row>
                                    </div>
                                </el-popover>
                                <!-- 中间圆 -->
                                <div class="left-box-cavan-center">
                                    <!-- <el-popover placement="left-start" width="200" trigger="hover"> -->
                                    <div
                                        slot="reference"
                                        class="left-box-cavan-circle"
                                        style="
                                            border: 1px #e6ffe1 solid;
                                            text-align: center;
                                            display: flex;
                                            align-items: center;
                                            justify-content: center;
                                        "
                                    >
                                        <div class="box-cavan-center-left">
                                            <div class="left-box-cavan-word">
                                                <el-image
                                                    :src="
                                                        require('@/assets/solarPower/chuneng.png')
                                                    "
                                                    fit="fill"
                                                />
                                                <div style="font-size: 12px">
                                                    <!-- <div>13.456</div>
                          <div>kw</div> -->
                                                </div>
                                                <div style="margin-top: 15px">
                                                    储能
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- <div style="font-size: 12px; line-height: 20px">
                    <el-row>
                      <el-col :span="12">优化器</el-col>
                      <el-col :span="12">48个</el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="12">设备总数</el-col>
                      <el-col :span="12">2台</el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="12">输出功率</el-col>
                      <el-col :span="12">79kw</el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="12">总发电量</el-col>
                      <el-col :span="12">6.45万度</el-col>
                    </el-row>
                  </div> -->
                                    <!-- </el-popover> -->

                                    <div
                                        class="left-box-cavan-circle"
                                        style="
                                            border: 1px #f7edfe solid;
                                            text-align: center;
                                            display: flex;
                                            align-items: center;
                                            justify-content: center;
                                        "
                                    >
                                        <div class="box-cavan-center-right">
                                            <div class="left-box-cavan-word">
                                                <el-image
                                                    :src="
                                                        require('@/assets/solarPower/dianwang.png')
                                                    "
                                                    fit="fill"
                                                />
                                                <div style="font-size: 12px">
                                                    <!-- <div>23.456</div>
                          <div>kw</div> -->
                                                </div>
                                                <div style="margin-top: 5px">
                                                    电网
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- 底部圆 -->
                                <div
                                    class="left-box-cavan-circle"
                                    style="
                                        border: 1px #e6f2fe solid;
                                        margin: 0 auto;
                                    "
                                >
                                    <div class="left-box-cavan-bottom">
                                        <el-image
                                            :src="
                                                require('@/assets/solarPower/fuzai.png')
                                            "
                                            fit="fill"
                                        />
                                        <div style="font-size: 12px">
                                            <!-- <div>33.456</div>
                      <div>kw</div> -->
                                        </div>
                                    </div>
                                </div>

                                <div class="left-box-cavan-word">负载</div>
                            </div>
                        </el-col>
                        <!-- 煤 -->
                        <el-col :span="8">
                            <div class="center-left-box-word">
                                <div class="center-left-box-word-num">
                                    <div>
                                        <el-image
                                            :src="
                                                require('@/assets/solarPower/ic_dedicate_coal_v2.png')
                                            "
                                            fit="fill"
                                        />
                                    </div>
                                    <div style="margin-left: 10px">
                                        <div>
                                            <span>{{
                                                pageData.reduction_total_coal
                                            }}</span>
                                            吨
                                        </div>
                                        <div>节约标准煤</div>
                                    </div>
                                </div>
                                <div class="center-left-box-word-num">
                                    <div>
                                        <el-image
                                            :src="
                                                require('@/assets/solarPower/ic_dedicate_CO2_v2.png')
                                            "
                                            fit="fill"
                                        />
                                    </div>
                                    <div style="margin-left: 10px">
                                        <div>
                                            <span>{{
                                                pageData.reduction_total_co2
                                            }}</span>
                                            吨
                                        </div>
                                        <div>CO₂减排量</div>
                                    </div>
                                </div>
                                <div class="center-left-box-word-num">
                                    <div>
                                        <el-image
                                            :src="
                                                require('@/assets/solarPower/ic_dedicate_Tree_v2.png')
                                            "
                                            fit="fill"
                                        />
                                    </div>
                                    <div style="margin-left: 10px">
                                        <div>
                                            <span>{{
                                                pageData.reduction_total_tree
                                            }}</span>
                                            吨
                                        </div>
                                        <div>等效植树量</div>
                                    </div>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </el-col>
                <!-- 告警 -->
                <el-col :span="12">
                    <div class="center-right-box">
                        <el-row :gutter="40">
                            <el-col :span="12">
                                <div>
                                    <span class="center-right-box-overbold"
                                        >{{ pageData.alarmTotal }}
                                    </span>
                                    告警
                                </div>
                                <div
                                    v-for="item in pageData.alarmNumVoList"
                                    :key="item.lev"
                                >
                                    <div style="margin-top: 30px">
                                        <el-row>
                                            <el-col :span="12">
                                                <div style="text-align: left">
                                                    {{ progressDict[item.lev] }}
                                                </div>
                                            </el-col>
                                            <el-col :span="12">
                                                <div style="text-align: right">
                                                    {{ item.sum }}
                                                </div>
                                            </el-col>
                                        </el-row>

                                        <el-progress
                                            :text-inside="true"
                                            :stroke-width="10"
                                            :percentage="progressPercent(item)"
                                            :show-text="false"
                                            :color="progressColor[item.lev]"
                                        ></el-progress>
                                    </div>
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <div
                                    v-for="(val, key) in addressData"
                                    :key="key"
                                    :class="
                                        key == 'plantName'
                                            ? ''
                                            : 'right-box-address'
                                    "
                                >
                                    <el-row :gutter="10">
                                        <el-col :span="10">
                                            {{ val }}
                                        </el-col>
                                        <el-col :span="14">
                                            <el-tooltip
                                                class="item"
                                                effect="dark"
                                                :content="pageData[key]"
                                                placement="top-start"
                                            >
                                                <div
                                                    class="box-address-nowrap center-right-box-overbold"
                                                >
                                                    {{ pageData[key] }}
                                                </div>
                                            </el-tooltip>
                                        </el-col>
                                    </el-row>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        pageData: {
            type: Object,
            default: () => {},
        },
    },
    name: "overviewCenter",
    data() {
        return {
            progressSum: 100,
            progressData: [
                {
                    name: "紧急",
                    num: 10,
                    color: "#fb123c",
                },
                {
                    name: "重要",
                    num: 20,
                    color: "#ff6b2d",
                },
                {
                    name: "次要",
                    num: 30,
                    color: "#e6a23c",
                },
                {
                    name: "提示",
                    num: 40,
                    color: "#e6a23c",
                },
            ],
            progressDict: {
                1: "严重",
                2: "重要",
                3: "次要",
                4: "提示",
            },
            progressColor: {
                1: "#fb123c",
                2: "#ff6b2d",
                3: "#e6a23c",
                4: "#409eff",
            },
            addressData: {
                //电站名称
                plantName: "电站名称",

                //电站地址
                plantAddress: "电站地址",

                //组串总容量
                capacity: "组串总容量",

                //并网时间
                gridConnectionDate: "并网时间",

                //经纬度
                longitudeAndLatitude: "经纬度",
            },
        };
    },
    created() {},
    computed: {
        progressPercent() {
            return (item) => {
                console.log(this.pageData.alarmTotal);
                return parseFloat(
                    ((item.sum / this.pageData.alarmTotal) * 100).toFixed(2)
                );
            };
        },
        // progressPercent: {
        //   get(item) {
        //     console.log(item)
        //   },
        //   set(val) {
        //     this.a = val
        //     console.log('222222', val)
        //   },
        // },
    },

    mounted() {},
    methods: {},
};
</script>
<style lang="scss" scoped>
.center-box-warp {
    width: 100%;
    height: 320px;
    border: 1px solid #dfdfdf;
    border-radius: 4px;
    margin-top: 10px;
    .center-left-box-cavan {
        width: 300px;
        padding: 0px 60px;
        .el-image {
            width: 30px;
            height: 30px;
        }
        .left-box-cavan-circle {
            height: 90px;
            width: 90px;
            // margin: 0 auto;
            border-radius: 50%;
            text-align: center;
            cursor: pointer;
        }

        .left-box-cavan-word {
            text-align: center;
            font-size: 12px;
            .top-line:nth-child(1) {
                background: #fdd552;
                height: 2px;
                position: absolute;
                transform-origin: left top;
                z-index: 10;
                width: 112px;
                top: 108px;
                left: 216px;
                transform: rotateZ(90deg);
                &::before {
                    content: "";
                    position: absolute;
                    height: 2px; // 流体的宽度，可以适当宽一些，但是注意位置偏移
                    width: 2px; // 流体路线长度，最好与线保持一致
                    background: linear-gradient(
                        to left,
                        transparent,
                        #fff
                    ); // 流体样式，这里是渐变
                    animation: fade-left 3s linear infinite; //使用fade-left动画
                    box-shadow: 0px 0px 5px 5px #62cbf7; // 外发光
                }

                // 向左流动，right改left为向右流动
                @keyframes fade-left {
                    0% {
                        left: 0px;
                        opacity: 0;
                    }
                    10% {
                        opacity: 1;
                    }
                    90% {
                        opacity: 1;
                    }
                    100% {
                        left: calc(
                            100% - 0px
                        ); // 到达终点时位置要减去自身的长度
                        opacity: 0;
                    }
                }
            }
            .top-line:nth-child(2) {
                background: #fdd552;
                height: 2px;
                position: absolute;
                transform-origin: left top;
                z-index: 10;
                width: 69px;
                top: 90px;
                left: 246px;
                transform: rotateZ(47deg);
                &::before {
                    content: "";
                    position: absolute;
                    height: 2px; // 流体的宽度，可以适当宽一些，但是注意位置偏移
                    width: 2px; // 流体路线长度，最好与线保持一致
                    background: linear-gradient(
                        to left,
                        transparent,
                        #fff
                    ); // 流体样式，这里是渐变
                    animation: fade-left 3s linear infinite; //使用fade-left动画
                    box-shadow: 0px 0px 5px 5px #ca7efb; // 外发光
                }

                // 向左流动，right改left为向右流动
                @keyframes fade-left {
                    0% {
                        left: 0px;
                        opacity: 0;
                    }
                    10% {
                        opacity: 1;
                    }
                    90% {
                        opacity: 1;
                    }
                    100% {
                        left: calc(
                            100% - 0px
                        ); // 到达终点时位置要减去自身的长度
                        opacity: 0;
                    }
                }
            }
            .top-line:nth-child(3) {
                background: #fdd552;
                height: 2px;
                position: absolute;
                transform-origin: left top;
                z-index: 10;
                width: 70px;
                top: 90px;
                left: 185px;
                transform: rotateZ(129deg);
                &::before {
                    content: "";
                    position: absolute;
                    height: 2px; // 流体的宽度，可以适当宽一些，但是注意位置偏移
                    width: 2px; // 流体路线长度，最好与线保持一致
                    background: linear-gradient(
                        to left,
                        transparent,
                        #fff
                    ); // 流体样式，这里是渐变
                    animation: fade-left 3s linear infinite; //使用fade-left动画
                    box-shadow: 0px 0px 5px 5px #8cd3dd; // 外发光
                }

                // 向左流动，right改left为向右流动
                @keyframes fade-left {
                    0% {
                        left: 0px;
                        opacity: 0;
                    }
                    10% {
                        opacity: 1;
                    }
                    90% {
                        opacity: 1;
                    }
                    100% {
                        left: calc(
                            100% - 0px
                        ); // 到达终点时位置要减去自身的长度
                        opacity: 0;
                    }
                }
            }
        }
        .left-box-cavan-top {
            border: 1px #fdd552 solid;
            height: 70px;
            width: 70px;
            margin: 0 auto;
            border-radius: 50%;
            margin-top: 10px;
            text-align: center;
        }
        .left-box-cavan-center {
            // margin-top: 15px;
            display: flex;
            justify-content: space-between;
            .box-cavan-center-left {
                border: 1px #8cd3dd solid;
                height: 70px;
                width: 70px;
                border-radius: 50%;
                text-align: center;
            }
            .box-cavan-center-right {
                border: 1px #ca7efb solid;
                height: 70px;
                width: 70px;
                border-radius: 50%;
            }
        }
        .left-box-cavan-bottom {
            border: 1px #62cbf7 solid;
            height: 70px;
            width: 70px;
            margin: 0 auto;
            margin-top: 10px;
            border-radius: 50%;
            text-align: center;
        }
    }
    .center-left-box-word {
        height: 300px;
        .center-left-box-word-num {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 14px;
            color: #777;
            height: 100px;
            div {
                span {
                    font-size: 20px;
                    font-weight: bold;
                    color: #000;
                }
            }
            .el-image {
                width: 50px;
                height: 50px;
            }
        }
    }
    .center-right-box {
        padding: 10px;
        color: #777;
        .center-right-box-overbold {
            color: #000;
            font-weight: bold;
        }
        .right-box-address {
            margin-top: 40px;
        }
        .box-address-nowrap {
            overflow: hidden; // 文字超长隐藏
            text-overflow: ellipsis; // 显示...
            white-space: nowrap; // 单行显示
        }
    }
}
</style>
